import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:cached_network_image/cached_network_image.dart';
import '../controllers/profile_controller.dart';
import '../../../utils/screen_adapter.dart';

class ProfileView extends GetView<ProfileController> {
  const ProfileView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFF5F5F5),
      body: SafeArea(
        child: SingleChildScrollView(
          child: Column(
            children: [
              _buildHeader(),
              SizedBox(height: 24.h),
              _buildMenuSection(),
            ],
          ),
        ),
      ),
    );
  }

  // 构建头部用户信息
  Widget _buildHeader() {
    return Container(
      width: double.infinity,
      padding: ScreenAdapter.padding(all: 24),
      decoration: BoxDecoration(
        gradient: const LinearGradient(
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
          colors: [
            Color(0xFF4CAF50),
            Color(0xFF66BB6A),
          ],
        ),
        borderRadius: BorderRadius.only(
          bottomLeft: Radius.circular(24.r),
          bottomRight: Radius.circular(24.r),
        ),
      ),
      child: Column(
        children: [
          // 用户头像
          Obx(
            () => GestureDetector(
              onTap: controller.isLoggedIn.value ? _showAvatarOptions : null,
              child: Container(
                width: 80.r,
                height: 80.r,
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  border: Border.all(
                    color: Colors.white,
                    width: 3.r,
                  ),
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black.withOpacity(0.2),
                      blurRadius: 8.r,
                      offset: Offset(0, 4.h),
                    ),
                  ],
                ),
                child: ClipOval(
                  child: CachedNetworkImage(
                    imageUrl: controller.avatarUrl,
                    fit: BoxFit.cover,
                    placeholder: (context, url) => Container(
                      color: Colors.white,
                      child: Icon(
                        Icons.person,
                        size: 40.r,
                        color: const Color(0xFF9E9E9E),
                      ),
                    ),
                    errorWidget: (context, url, error) => Container(
                      color: Colors.white,
                      child: Icon(
                        Icons.person,
                        size: 40.r,
                        color: const Color(0xFF9E9E9E),
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ),
          
          SizedBox(height: 16.h),
          
          // 用户名
          Obx(
            () => Text(
              controller.displayName,
              style: TextStyle(
                fontSize: 20.sp,
                fontWeight: FontWeight.w700,
                color: Colors.white,
              ),
            ),
          ),
          
          SizedBox(height: 8.h),
          
          // 登录状态或邮箱
          Obx(
            () => Text(
              controller.isLoggedIn.value 
                  ? controller.currentUser.value.email
                  : '点击登录享受更多功能',
              style: TextStyle(
                fontSize: 14.sp,
                color: Colors.white.withOpacity(0.9),
              ),
            ),
          ),
          
          SizedBox(height: 24.h),
          
          // 登录/退出按钮
          Obx(
            () => SizedBox(
              width: double.infinity,
              child: ElevatedButton(
                onPressed: controller.isLoading.value 
                    ? null 
                    : (controller.isLoggedIn.value 
                        ? controller.logout 
                        : controller.showLoginDialog),
                style: ElevatedButton.styleFrom(
                  backgroundColor: Colors.white,
                  foregroundColor: const Color(0xFF4CAF50),
                  padding: ScreenAdapter.padding(vertical: 12),
                  shape: RoundedRectangleBorder(
                    borderRadius: ScreenAdapter.borderRadius(all: 8),
                  ),
                  elevation: 0,
                ),
                child: controller.isLoading.value
                    ? SizedBox(
                        width: 20.r,
                        height: 20.r,
                        child: const CircularProgressIndicator(
                          strokeWidth: 2,
                          valueColor: AlwaysStoppedAnimation<Color>(Color(0xFF4CAF50)),
                        ),
                      )
                    : Text(
                        controller.isLoggedIn.value ? '退出登录' : '登录',
                        style: TextStyle(
                          fontSize: 16.sp,
                          fontWeight: FontWeight.w600,
                        ),
                      ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  // 构建菜单部分
  Widget _buildMenuSection() {
    return Padding(
      padding: ScreenAdapter.padding(horizontal: 16),
      child: Column(
        children: [
          _buildMenuGroup([
            _buildMenuItem(
              icon: Icons.favorite_outline,
              title: '我的收藏',
              subtitle: '收藏的Wiki页面',
              onTap: () {
                Get.snackbar('提示', '收藏功能开发中...');
              },
            ),
            _buildMenuItem(
              icon: Icons.history,
              title: '浏览历史',
              subtitle: '最近浏览的内容',
              onTap: () {
                Get.snackbar('提示', '历史记录功能开发中...');
              },
            ),
            _buildMenuItem(
              icon: Icons.download_outlined,
              title: '离线下载',
              subtitle: '下载Wiki内容离线阅读',
              onTap: () {
                Get.snackbar('提示', '离线下载功能开发中...');
              },
            ),
          ]),
          
          SizedBox(height: 16.h),
          
          _buildMenuGroup([
            _buildMenuItem(
              icon: Icons.settings_outlined,
              title: '设置',
              subtitle: '应用设置和偏好',
              onTap: () {
                Get.snackbar('提示', '设置功能开发中...');
              },
            ),
            _buildMenuItem(
              icon: Icons.help_outline,
              title: '帮助与反馈',
              subtitle: '使用帮助和问题反馈',
              onTap: () {
                Get.snackbar('提示', '帮助功能开发中...');
              },
            ),
            _buildMenuItem(
              icon: Icons.info_outline,
              title: '关于',
              subtitle: '应用信息和版本',
              onTap: controller.showAboutDialog,
            ),
          ]),
        ],
      ),
    );
  }

  // 构建菜单组
  Widget _buildMenuGroup(List<Widget> items) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: ScreenAdapter.borderRadius(all: 12),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.05),
            blurRadius: 8.r,
            offset: Offset(0, 2.h),
          ),
        ],
      ),
      child: Column(
        children: items.asMap().entries.map((entry) {
          final index = entry.key;
          final item = entry.value;
          
          return Column(
            children: [
              item,
              if (index < items.length - 1)
                Divider(
                  height: 1.h,
                  color: const Color(0xFFE0E0E0),
                  indent: 56.w,
                ),
            ],
          );
        }).toList(),
      ),
    );
  }

  // 构建菜单项
  Widget _buildMenuItem({
    required IconData icon,
    required String title,
    required String subtitle,
    required VoidCallback onTap,
    Widget? trailing,
  }) {
    return Material(
      color: Colors.transparent,
      child: InkWell(
        onTap: onTap,
        borderRadius: ScreenAdapter.borderRadius(all: 12),
        child: Padding(
          padding: ScreenAdapter.padding(all: 16),
          child: Row(
            children: [
              Container(
                width: 40.r,
                height: 40.r,
                decoration: BoxDecoration(
                  color: const Color(0xFF4CAF50).withOpacity(0.1),
                  borderRadius: ScreenAdapter.borderRadius(all: 8),
                ),
                child: Icon(
                  icon,
                  size: 20.r,
                  color: const Color(0xFF4CAF50),
                ),
              ),
              
              SizedBox(width: 16.w),
              
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      title,
                      style: TextStyle(
                        fontSize: 16.sp,
                        fontWeight: FontWeight.w600,
                        color: const Color(0xFF333333),
                      ),
                    ),
                    SizedBox(height: 2.h),
                    Text(
                      subtitle,
                      style: TextStyle(
                        fontSize: 12.sp,
                        color: const Color(0xFF666666),
                      ),
                    ),
                  ],
                ),
              ),
              
              trailing ?? Icon(
                Icons.arrow_forward_ios,
                size: 16.r,
                color: const Color(0xFF9E9E9E),
              ),
            ],
          ),
        ),
      ),
    );
  }

  // 显示头像选项
  void _showAvatarOptions() {
    Get.bottomSheet(
      Container(
        padding: ScreenAdapter.padding(all: 24),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(24.r),
            topRight: Radius.circular(24.r),
          ),
        ),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Container(
              width: 40.w,
              height: 4.h,
              decoration: BoxDecoration(
                color: const Color(0xFFE0E0E0),
                borderRadius: ScreenAdapter.borderRadius(all: 2),
              ),
            ),
            
            SizedBox(height: 24.h),
            
            Text(
              '更换头像',
              style: TextStyle(
                fontSize: 18.sp,
                fontWeight: FontWeight.w600,
                color: const Color(0xFF333333),
              ),
            ),
            
            SizedBox(height: 24.h),
            
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                _buildAvatarOption(
                  icon: Icons.camera_alt,
                  label: '拍照',
                  onTap: () {
                    Get.back();
                    Get.snackbar('提示', '拍照功能开发中...');
                  },
                ),
                _buildAvatarOption(
                  icon: Icons.photo_library,
                  label: '相册',
                  onTap: () {
                    Get.back();
                    Get.snackbar('提示', '相册功能开发中...');
                  },
                ),
                _buildAvatarOption(
                  icon: Icons.person,
                  label: '默认',
                  onTap: () {
                    Get.back();
                    controller.updateAvatar('https://via.placeholder.com/150');
                  },
                ),
              ],
            ),
            
            SizedBox(height: 24.h),
          ],
        ),
      ),
    );
  }

  // 构建头像选项
  Widget _buildAvatarOption({
    required IconData icon,
    required String label,
    required VoidCallback onTap,
  }) {
    return GestureDetector(
      onTap: onTap,
      child: Column(
        children: [
          Container(
            width: 60.r,
            height: 60.r,
            decoration: BoxDecoration(
              color: const Color(0xFF4CAF50).withOpacity(0.1),
              shape: BoxShape.circle,
            ),
            child: Icon(
              icon,
              size: 24.r,
              color: const Color(0xFF4CAF50),
            ),
          ),
          SizedBox(height: 8.h),
          Text(
            label,
            style: TextStyle(
              fontSize: 14.sp,
              color: const Color(0xFF333333),
            ),
          ),
        ],
      ),
    );
  }
}

